<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>登录页面</title>
        <!-- 引入css文件  -->
        <link rel="stylesheet" type="text/css" href="layui/css/layui.css"/>
        <link rel="stylesheet" type="text/css" href="static/css/login.css"/>
        <style type="text/css">
            #container{
                background-image: url("static/image/background.jpg");
            }
        </style>
    </head>
    <body>
        <div id="container">
            <div class="form_out_div">
                <div class="title" style="text-align: center">
                    <font style="font-family: 华文楷体;font-size: 30px;color: darkgreen;font-weight: bolder">开放平台后台管理系统</font>
                </div>
                <form class="layui-form" action="#">
                    <div class="layui-form-item">
                        <label class="layui-form-label">用户名</label>
                        <div class="layui-input-inline">
                            <input type="text" name="username" lay-verify="required" placeholder="请输入用户名"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">密码</label>
                        <div class="layui-input-inline">
                            <input type="password" name="password" lay-verify="required" placeholder="请输入密码"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">验证码</label>
                        <div class="layui-input-inline">
                            <div class="code_div">
                                <input type="text" name="validCode" placeholder="请输入验证码" lay-verify="required" autocomplete="off" class="layui-input" style="width: 100px"/>
                                <!-- 如果项目没有上下文路径，则img src="/kaptcha"，如果有上下文路径，则img src="kaptcha" -->
                                <img src="kaptcha" onclick="reload(this)" style="width: 84px; height: 38px; cursor: pointer;" title="鼠标左键单击刷新验证码"/>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-submit lay-filter="login">立即登录</button>
<!--                            <span id="msg"></span>-->
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <script src="static/js/jquery-1.11.min.js"></script>
        <script src="layui/layui.js"></script>
        <script type="text/javascript" src="static/js/login.js"></script>

        <script>
            layui.use('form', function () {
                var form = layui.form;
                //监听提交
                form.on('submit(login)', function (data) {
                    //登录时显示用户输入的数据信息
                    //layer.msg(JSON.stringify(data.field));
                    // alert(JSON.stringify(data.field.username));

                    $.ajax({
                        type:"post",
                        url:"/user/login",
                        data:data.field,
                        success:function (result){
                            if (result == 1){
                                // alert(data.field.username)
                                layer.msg("<font color='green'>恭喜你，登录成功！</font>",{icon: 1, time: 2000});
                                // localStorage.setItem("username",data.field.username);
                                setTimeout(function (){
                                    location.href = "/index.html?"+data.field.username;
                                },2000);
                            }else if (result == 0){
                                // $("#msg").html("用户名或密码错误,登录失败")
                                layer.msg("<font color='red'>用户不存在，登录失败</font>",{
                                    icon: 2,
                                    time: 2000
                                })
                                $(".layui-input").val("")
                                setTimeout(function (){
                                    location.href = "/register.html";
                                },2000)
                                // alert("用户不存在，登录失败")
                                // location.href = "/login.html";
                            }else if (result == -1){
                                layer.msg("<font color='red'>密码错误，登录失败</font>",{icon: 2, time:2000})
                                $(".layui-input").val("")
                                // alert("密码错误，登录失败")
                                // location.href = "/login.html";
                            }else if (result == -2){
                                layer.msg("<font color='red'>验证码错误，登录失败</font>",{icon: 2, time:2000})
                                // $(".layui-input").val("")
                                // alert("验证码错误，登录失败")
                                setTimeout(function (){
                                    location.href = "/login.html";
                                },2000);
                            }
                        }
                    });
                    return false;
                });
            });
        </script>
    </body>
</html>